<template>
  <div class="register-container">
    <el-card class="register-box">
      <div class="register-header">
        <div class="logo-container" ref="logoRef">
          <svg class="animated-text" preserveAspectRatio="xMidYMid meet" style="width: 120%; height: 120%; transform: translateX(10%);" viewBox="41.8 35.90001 205.50002 94.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#FF6B6B"/>
                <stop offset="50%" style="stop-color:#4ECDC4"/>
                <stop offset="100%" style="stop-color:#45B7D1"/>
              </linearGradient>
            </defs>
            <path d="M 108.600006 76.100006 Q 108.600006 92.8 99.4 108.50001 Q 96.2 114.00001 90.4 114.00001 Q 84.100006 114.00001 81.7 106.700005 Q 80.6 103.40001 79.95 99.450005 Q 79.3 95.50001 79.1 94.50001 Q 78.3 96.100006 76.25 101.15001 Q 74.2 106.200005 72.8 108.80001 Q 70.7 113.00001 66.8 113.00001 Q 63.9 113.00001 61.6 110.80001 Q 59.7 108.80001 59.2 103.00001 Q 59.1 101.100006 58.95 99.50001 Q 58.8 97.90001 58.8 96.50001 Q 58.8 95.100006 59.1 93.100006 Q 59.4 91.100006 59.75 89.3 Q 60.1 87.50001 60.9 85.00001 Q 61.7 82.50001 62.3 80.75001 Q 62.9 79.00001 64.05 76.20001 Q 65.2 73.40001 65.8 71.95001 Q 66.4 70.50001 67.75 67.600006 Q 69.1 64.70001 69.6 63.600006 Q 70.9 60.500008 72.9 56.500008 Q 66.4 63.400005 59 66.00001 Q 56.9 66.70001 54.75 66.70001 Q 52.6 66.70001 51.3 65.00001 Q 50 63.300007 50 60.20001 Q 50 57.100006 53.85 53.500008 Q 57.7 49.90001 62.5 47.800003 Q 67.3 45.700005 71.15 45.700005 Q 75 45.700005 78.35 48.200005 Q 81.7 50.700005 81.7 54.800003 Q 81.7 56.300007 80.55 59.400005 Q 79.4 62.500008 76.1 70.600006 Q 68.9 88.50001 66.5 98.8 Q 66.3 99.600006 66.3 100.350006 Q 66.3 101.100006 67 101.100006 Q 70 101.100006 79 74.00001 Q 78.3 73.100006 78.3 72.20001 Q 78.3 70.90001 80.7 70.90001 Q 85.600006 70.90001 87.3 71.100006 Q 89 71.3 89 72.20001 Q 89 73.100006 88.3 73.600006 Q 87.2 85.3 87.2 89.3 Q 87.2 93.3 88 99.600006 Q 88.8 105.90001 90.5 105.90001 Q 92 105.90001 93.5 102.200005 Q 100.2 87.50001 100.2 73.350006 Q 100.2 59.20001 92.8 47.200005 Q 91.7 45.600006 91.7 44.100006 Q 91.7 41.700005 95.2 41.700005 Q 98.7 41.700005 100.5 44.800003 Q 108.600006 59.400005 108.600006 76.100006 ZM 56.5 54.90001 Q 55.4 56.000008 55.4 56.900005 Q 55.4 57.800007 56.6 57.800007 Q 59.9 57.800007 66.5 50.500008 Q 59.8 51.600006 56.5 54.90001 Z" style="--path-length: 651.00885; fill: transparent; stroke: url(#logoGradient)"/>
            <path d="M 163.40001 47.800003 Q 173.90001 47.800003 177.3 56.500008 Q 177.90001 58.20001 177.90001 59.900005 Q 177.90001 64.600006 173.70001 68.95001 Q 169.5 73.3 161.65001 80.00001 Q 153.8 86.70001 150.6 89.8 Q 143.1 97.00001 143.1 101.600006 Q 143.1 104.40001 146.8 104.40001 Q 154.2 104.40001 170.40001 101.700005 L 171.3 101.600006 Q 172.6 101.600006 172.6 102.90001 Q 172.6 104.200005 172 105.80001 Q 169.40001 114.40001 152.5 114.40001 Q 146.7 114.40001 143 113.00001 Q 139.3 111.600006 137.3 107.00001 Q 136.1 104.40001 136.1 101.50001 Q 136.1 95.700005 141.05 89.8 Q 146 83.90001 155.2 74.15001 Q 164.40001 64.40001 167 61.350006 Q 169.6 58.300007 169.6 57.500008 Q 169.6 55.800003 162.5 55.800003 Q 158.8 55.800003 151.8 56.400005 Q 146.1 59.800007 137.1 59.800007 Q 134.6 59.800007 133.45 59.050007 Q 132.3 58.300007 132.3 55.500008 Q 132.3 52.700005 133.05 50.90001 Q 133.8 49.100006 136.85 47.750008 Q 139.90001 46.40001 146.65001 44.000008 Q 153.40001 41.600006 154.8 41.600006 Q 156.2 41.600006 156.75 42.350006 Q 157.3 43.100006 157.90001 44.800003 L 158.6 46.500008 Q 159.2 47.90001 160.5 47.90001 L 163.40001 47.800003 Z" style="--path-length: 388.22067; fill: transparent; stroke: url(#logoGradient)"/>
          </svg>
        </div>
        <h2>注册</h2>
        <p class="welcome-text">创建您的账号</p>
      </div>

      <el-form 
        :model="formData" 
        :rules="rules" 
        ref="registerFormRef" 
        class="register-form"
      >
        <el-form-item prop="username">
          <el-input 
            v-model="formData.username" 
            placeholder="请输入用户名"
            :disabled="loading"
          />
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input 
            v-model="formData.password" 
            type="password" 
            placeholder="请输入密码"
            show-password
            :disabled="loading"
          />
        </el-form-item>
        
        <el-form-item prop="confirmPassword">
          <el-input 
            v-model="formData.confirmPassword" 
            type="password" 
            placeholder="请确认密码"
            show-password
            :disabled="loading"
          />
        </el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleRegister"
            :loading="loading"
            class="register-button"
          >
            {{ loading ? '注册中...' : '注册' }}
          </el-button>
        </el-form-item>
      </el-form>

      <div class="login-link">
        已有账号？
        <router-link to="/login">立即登录</router-link>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const loading = ref(false)
const registerFormRef = ref(null)

const formData = ref({
  username: '',
  password: '',
  confirmPassword: ''
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (value !== formData.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      }, 
      trigger: ['blur', 'change']
    }
  ]
}

const handleRegister = async () => {
  if (!registerFormRef.value) return
  
  try {
    // 表单验证
    await registerFormRef.value.validate()
    loading.value = true
    
    // 发送注册请求
    const response = await fetch('http://localhost:8088/users/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: formData.value.username.trim(),
        password: formData.value.password
      })
    })

    const data = await response.json()
    
    if (response.ok) {
      ElMessage.success('注册成功')
      router.push('/login')
    } else {
      throw new Error(data.message || '注册失败')
    }
    
  } catch (error) {
    console.error('注册错误:', error)
    ElMessage.error(error.message || '注册失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.register-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #212121;
  overflow: hidden;
}

.register-box {
  width: 400px;
  padding: 40px;
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.18);
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-container {
  width: 220px;
  height: 100px;
  margin: 0 auto 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.animated-text {
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform;
}

.animated-text path {
  fill: transparent;
  stroke: url(#logoGradient);
  stroke-width: 2;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: logo-anim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes logo-anim {
  0% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    opacity: 0;
    fill: transparent;
  }

  5% {
    opacity: 1;
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
  }

  50% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
  }

  60% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: currentColor;
    opacity: 1;
  }

  75% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: currentColor;
    opacity: 1;
  }

  85% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }

  95% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 0;
  }
}

.register-header {
  text-align: center;
  margin-bottom: 30px;
}

.register-header h2 {
  color: #333;
  margin: 0;
  font-size: 24px;
  animation: fadeIn 0.6s ease-out 0.3s both;
}

.welcome-text {
  color: #666;
  margin: 10px 0 0;
  animation: fadeIn 0.6s ease-out 0.4s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.register-form {
  animation: fadeIn 0.6s ease-out 0.5s both;
}

:deep(.el-input__wrapper) {
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6)) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  backdrop-filter: blur(5px) !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper.is-focus) {
  border-color: #4ECDC4 !important;
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.2) !important;
}

:deep(.el-button) {
  background: linear-gradient(45deg, #4ECDC4, #45B7D1);
  border: none;
  width: 100%;
  height: 40px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

:deep(.el-button)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

:deep(.el-button:hover)::before {
  left: 100%;
}

.login-link {
  text-align: center;
  margin-top: 20px;
  color: #666;
  animation: fadeIn 0.6s ease-out 0.6s both;
}

.login-link a {
  color: #4ECDC4;
  text-decoration: none;
  margin-left: 5px;
}

.login-link a:hover {
  text-decoration: underline;
}

/* 优化动画性能 */
.animated-logo {
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translateZ(0);
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .register-box {
    width: 90%;
    padding: 20px;
  }

  .logo-container {
    width: 180px;
    height: 80px;
  }

  .animated-text {
    transform: scale(0.9) translateX(8%);
  }
}
</style> 